/*
 * @Author: wenqingwu 18417432@qq.com
 * @Date: 2023-07-11 15:45:18
 * @LastEditors: wenqingwu 18417432@qq.com
 * @LastEditTime: 2023-07-11 16:32:40
 * @FilePath: \w325coding-react\day104\router-v6\src\home\index.jsx
 * @Description: 主界面组件home
 */
import React from 'react';
import { NavLink, Outlet, useLocation, useSearchParams } from 'react-router-dom'
import { Layout, Row, Col } from 'antd'
const { Header, Sider, Footer, Content, } = Layout
const Index = (props) => {
  // props有没有路由的对象
  // console.log(props)  // {}, 没有路由的相关对象，location,history, match,
  // 通过hooks函数获取：

  // 1. location对象：
  const location = useLocation();
  // console.log(location)  // {pathname: '/home', search: '', hash: '', state: null, key: 'fvmvnhqz'}

  //2， 获取？后面的参数：
  const [search, setSearch] = useSearchParams();
  // console.log(search) // URLSearchParams {size: 1}
  let id = search.get('id')
  console.log(id)

  return (
    <Layout>
      <Header style={{ backgroundColor: 'white' }}>
        <h1>遂宁市智能水务管理系统-version {id}</h1>
      </Header>
      <Layout>
        <Sider theme="light">
          <ul>
            <li>
              <NavLink to="/home/course/123">课程管理</NavLink>
            </li>
            <li>
              <NavLink to="/home/dept">部门管理</NavLink>
            </li>
            <li>
              <NavLink to="/home/roles">角色管理</NavLink>
            </li>
            <li>
              <NavLink to="/home/users">用户管理</NavLink>
            </li>
          </ul>
        </Sider>
        <Layout>
          <Content style={{ height: '300px', color: 'blue' }}>
            {/* 子路由输出位置、输出的窗口 */}
            <Outlet></Outlet>
          </Content>
          <Footer></Footer>
        </Layout>
      </Layout>
    </Layout>
  );
}

export default Index;
